<template>
  <div class="common-layout">
    <el-container style="background-color: white;">
      <el-header style="border-bottom: 1px solid #ccc;">
        <div class="header-container">
          <div class="header-left">
            <h1>水利工程数字化档案资源利用平台</h1>
          </div>
          <div class="header-center">
            <el-select v-model="searchType" placeholder="Select" style="width: 105px">
              <el-option label="项目名称" value="1" />
              <el-option label="位置信息" value="2" />
              <el-option label="合同号" value="3" />
            </el-select>

            <el-cascader v-if="searchType == 2"size="default" clearable :options="areaArr" v-model="selectedOptions">
            </el-cascader>
            <el-input v-else v-model="searchQuery" placeholder="请输入您的搜索内容" class="search-input">
            </el-input>

            <el-button type="primary" icon="Search" @click="performSearch" />
          </div>
          <div class="header-right">
            <span v-if="userStore.currentUser">{{ userStore.currentUser }}</span>
            <el-button v-if="userStore.currentUser" @click="userStore.logout">退出登陆</el-button>
            <el-button v-else @click="showLoginModal">登陆</el-button>
          </div>
        </div>


      </el-header>
      <NavBar v-if="userStore.currentUser" />
      <div :class="{ 'main-container': true, 'admin-mode': userStore.currentUser }">
        <router-view v-slot="{ Component }" :key="$route.fullPath">
          <keep-alive>
            <component :is="Component" :key="$route.fullPath" />
          </keep-alive>
        </router-view>
      </div>
    </el-container>
  </div>
  <LoginModal v-model:visible="loginModalVisible" @login="handleLogin" />
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { pcaTextArr } from 'element-china-area-data'
import { useTreeStore } from '@/stores/treeStore';
import LoginModal from '@/components/LoginModal.vue';
import { ElMessage } from 'element-plus';
import request from '@/utils/request';
import NavBar from '@/components/NavBar.vue'
import { useBasemapStore } from '@/stores/basemapStore';
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()
const treeStore = useTreeStore();
const basemapStore = useBasemapStore();
const searchQuery = ref('')
const searchType = ref('1')
const loginModalVisible = ref(false)

const selectedOptions = ref()


let areaArr = computed(() => {
  pcaTextArr.forEach((s) => {
    s.children.forEach(_s => {
      console.log(_s)
      _s.children.unshift({
        label: "全部",
        value: ""
      })
    });
  })
  return pcaTextArr.filter(function (item) {
    return item.label == "辽宁省"
  })

  //  return num1.value + num2.value 
})

const showLoginModal = () => {
  loginModalVisible.value = true
}

const handleLogin = async (credentials) => {
  const success = await userStore.login(credentials)
  if (success) {
    loginModalVisible.value = false
  }
}

const performSearch = async () => {
  if (searchType.value == 1) {

    await treeStore.loadTreeData({
      "proname": searchQuery.value
    })
    const { data } = await request.post(`/zhsj/api/selectslsjpage?pageindex=0&pagesize=100&name=${searchQuery.value}`)
    if (data.records.length) {
      data.records.forEach((item) => {
        window.addProject(item.gemo);
      });
    }
  }
  if (searchType.value == 3) {
    await treeStore.loadTreeData({
      "hth": searchQuery.value
    })
    const { data } = await request.post(`/zhsj/api/selectslsjpage?pageindex=0&pagesize=100&name=${searchQuery.value}`)
    if (data.records.length) {
      data.records.forEach((item) => {
        window.addProject(item.gemo);
      });
    }
  }
  if (searchType.value == 2) {
    await treeStore.loadTreeData({
      shi: selectedOptions.value[1],
      qu: selectedOptions.value[2]
    })
    if (selectedOptions.value[2] == '') {
      const qus = [];
      treeStore.baseTree.forEach(element => {
        if (element.children) {
          element.children.forEach(item => {
            qus.push(item.label)
          })
        }
      });
      console.log(qus)
      window.showxzqByAttribute(
        "区",
        "沈阳市",
        qus,
        false,
        null
      );
    } else {
      window.showxzqByAttribute("区", "沈阳市", [selectedOptions.value[2]], true, null);
    }
    if (treeStore.baseTree.length <= 0) {
    }
  }
}

// 添加 watch 监听 searchType 变化
watch(searchType, () => {
  searchQuery.value = ''
  selectedOptions.value = undefined
})
</script>

<style scoped>
.el-header {
  z-index: 999;
  background-color: #fff;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header-left,
.header-center,
.header-right {
  flex: 1;
}

.header-center {
  display: flex;
  justify-content: center;
}

.header-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.search-input {
  width: 300px;
}
</style>
